import { createFileRoute } from '@tanstack/react-router'

export const Route = createFileRoute('/about')({
  component: AboutComponent,
})

function AboutComponent() {
  return (
    <div className="max-w-4xl mx-auto">
      <div className="bg-white rounded-lg shadow-sm p-8">
        <h1 className="text-3xl font-bold text-gray-900 mb-6">关于我们</h1>
        
        <div className="prose prose-gray max-w-none">
          <p className="text-lg text-gray-600 mb-6">
            欢迎使用我们的资产管理系统！这是一个现代化的个人资产管理平台，
            帮助您更好地管理个人资产和健康状况。
          </p>
          
          <div className="grid md:grid-cols-2 gap-8 mt-8">
            <div className="bg-gray-50 rounded-lg p-6">
              <h3 className="text-xl font-semibold text-gray-900 mb-4">功能特色</h3>
              <ul className="space-y-2 text-gray-600">
                <li>• 资产管理 - 跟踪和管理您的投资组合</li>
                <li>• 体重记录 - 监控您的健康指标</li>
                <li>• 数据可视化 - 直观的图表展示</li>
                <li>• 响应式设计 - 适配各种设备</li>
              </ul>
            </div>
            
            <div className="bg-gray-50 rounded-lg p-6">
              <h3 className="text-xl font-semibold text-gray-900 mb-4">技术栈</h3>
              <ul className="space-y-2 text-gray-600">
                <li>• React 19 - 现代化前端框架</li>
                <li>• TypeScript - 类型安全的开发</li>
                <li>• Tailwind CSS - 实用优先的样式框架</li>
                <li>• Recharts - 数据可视化图表库</li>
              </ul>
            </div>
          </div>
          
          <div className="mt-8 p-6 bg-blue-50 rounded-lg">
            <h3 className="text-xl font-semibold text-blue-900 mb-4">联系我们</h3>
            <p className="text-blue-800">
              如果您有任何问题或建议，欢迎通过以下方式联系我们：
            </p>
            <div className="mt-4 space-y-2 text-blue-700">
              <p>📧 邮箱：support@example.com</p>
              <p>📱 电话：400-123-4567</p>
              <p>🏢 地址：北京市朝阳区示例大厦</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}